<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
	</head>
	<style>
	/* 方法一： */
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 20%;
			/* 设置height为0 ，避免盒子被内容撑开多余的高度 */
			height: 0px;
			/* 把盒子的高撑开，
			   和width设置同样的固定的宽度或者百分比 ，
			   百分比相对的是父元素盒子的宽度 */
			padding-bottom: 20%;
			background: pink;
			color: #666;
			position: relative;
			overflow: hidden;
		}
		p{
			position: absolute;
			width: 100%;
			height: 100%;
			background: yellow;
		}
	/* 方法二： */
/* 		.box{
			width: 20%;
			height: 20vw;
			color: white;
			background: pink;
		} */
	</style>
	<body>
		<div class="box">	
			<p>&nbsp;这是一个自适应的正方形</p>
		</div>	
	</body>
</html>